<!--
 * @Date: 2021-09-07 10:10:14
 * @Author: 陶子
 * @LastEditTime: 2023-06-15 13:52:09
 * @FilePath: \jk_one-stop_pc\src\views\bigView\equipment\components\faultCategory.vue
 * @pageName: 这是--(故障类别TOP5（近6个月）)--组件
-->
<template>
  <div class="livenessRoot">
    <div class="topBox">
      <div class="topTitle">
        <img src="~@/assets/img/screen-p1.png" alt="" />
        故障类别TOP5（近6个月）
      </div>
    </div>
    <Echart :options="options" height="86%" width="100%"></Echart>
  </div>
</template>
<script>
import Echart from '@/common/echart'
let colors = ['#F32144', '#F8702D', '#DBC54C', '#46E9F7', '#46E9F7']
export default {
  components: { Echart },
  props: ['categoryData'],
  data() {
    return {
      options: {},
      bgColor: 'transparent',
    }
  },
  watch: {
    categoryData: {
      handler(newVal, oldVal) {
        if (newVal.length > 0) {
          let echartData = JSON.parse(JSON.stringify(newVal))
          let max = parseInt(echartData[0].value)
          for (let i = 0; i < echartData.length - 1; i++) {
            max = max < parseInt(echartData[i + 1].value) ? parseInt(echartData[i + 1].value) : max
          }
          this.options = {
            tooltip: {
              trigger: 'axis',
              formatter(params) {
                for (var i = 0; i < params.length; i++) {
                  return `${params[i].name}</br>次数：${params[i].data.value}`
                }
              },
            },
            legend: {
              show: false,
            },
            grid: {
              top: '5%',
              bottom: 0,
              left: '2%',
              right: '0%',
            },
            xAxis: {
              show: false,
              type: 'value',
            },
            yAxis: [
              {
                type: 'category',
                inverse: true,
                axisLine: {
                  show: false,
                },
                axisTick: {
                  show: false,
                },
                data: echartData.map((item) => item.name),
                axisLabel: {
                  // show: false,
                  margin: 0,
                  fontSize: 16,
                  align: 'left',
                  color: '#fff',
                  padding: [0, 0, 70, 0],
                  interval: 0,
                  rich: {
                    a0: {
                      width: 39,
                      height: 14,
                      backgroundColor: '#F12144',
                      fontWeight: 'bold',
                      fontSize: 16,
                      padding: [5, 5, 3, 3],
                      lineHeight: 24
                    },
                    a1: {
                      width: 39,
                      height: 14,
                      backgroundColor: '#F8702D',
                      fontWeight: 'bold',
                      fontSize: 16,
                      padding: [5, 5, 3, 3],
                      lineHeight: 24
                    },
                    a2: {
                      width: 39,
                      height: 14,
                      backgroundColor: '#DBC54C',
                      fontWeight: 'bold',
                      fontSize: 16,
                      padding: [5, 5, 3, 3],
                      lineHeight: 24
                    },
                    a3: {
                      width: 39,
                      height: 14,
                      backgroundColor: '#46E9F7',
                      fontWeight: 'bold',
                      fontSize: 16,
                      padding: [5, 5, 3, 3],
                      lineHeight: 24
                    },
                    a4: {
                      width: 39,
                      height: 14,
                      backgroundColor: '#46E9F7',
                      fontWeight: 'bold',
                      fontSize: 16,
                      padding: [5, 5, 3, 3],
                      lineHeight: 24
                    },
                    b: {
                      fontWeight: 'bold',
                      fontSize: 16,
                      color: '#fff',
                    },
                  },
                  formatter: function (params, index) {
                    return `{a${index}|NO:${index+1}} {b|${params}}`
                    index = index + 1
                    if (index - 1 < 3) {
                      return ['{a' + index + '|' + '}' + '  ' + params].join('\n')
                    } else {
                      return ['{b|' + index + '}' + '  ' + params].join('\n')
                    }
                  },
                },
              },
              {
                triggerEvent: true,
                show: true,
                inverse: true,
                data: echartData.map((item) => item.value),
                axisLine: {
                  show: false,
                },
                splitLine: {
                  show: false,
                },
                axisTick: {
                  show: false,
                },
                axisLabel: {
                  interval: 0,
                  color: function (params, index) {
                    return colors[index]
                  },
                  align: 'right',
                  verticalAlign: 'bottom',
                  lineHeight: 30,
                  fontSize: 16,
                  fontWeight: 'bold',
                  padding: [0, 30, 15, 0],
                  formatter: '{value}',
                },
              },
            ],
            series: [
              {
                name: 'value',
                type: 'bar',
                barWidth: 19,
                // legendHoverLink: false,
                // silent: true,
                itemStyle: {
                  normal: {
                    color: function (params) {
                      let barColor = {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 1,
                        y2: 0,
                        colorStops: [
                          {
                            offset: 0,
                            color: 'transparent', // 0% 处的颜色
                          },
                          {
                            offset: 1,
                            color: colors[params.dataIndex], // 100% 处的颜色
                          },
                        ],
                      }
                      return barColor
                    },
                  },
                },

                data: echartData.map((item, i) => {
                  return {
                    value: item.value,
                  }
                }),
                z: 1,
                animationEasing: 'elasticOut',
              },
              {
                // 分隔
                type: 'pictorialBar',
                itemStyle: {
                  normal: {
                    color: '#061348',
                  },
                },
                symbolRepeat: 'fixed',
                symbolMargin: 30,
                symbol: 'rect',
                symbolClip: true,
                symbolSize: [5, 19],
                symbolPosition: 'start',
                symbolOffset: [60, -3],
                symbolBoundingData: 100,
                data: echartData.map((item) => item.value),
                z: 2,
                animationEasing: 'elasticOut',
              },
              {
                name: '背景',
                type: 'bar',
                barGap: '-130%', // 设置外框粗细
                data: new Array(echartData.length).fill(max * 2),
                barWidth: 31,
                itemStyle: {
                  normal: {
                    color: 'transparent', // 填充色
                    barBorderColor: 'rgba(145, 169, 255, 1)', // 边框色
                    barBorderWidth: 1, // 边框宽度
                    // barBorderRadius: 0, //圆角半径
                    label: {
                      // 标签显示位置
                      show: false,
                      position: 'top', // insideTop 或者横向的 insideLeft
                    },
                  },
                },
                z: 0,
              },
            ],
          }
        }
      },
      immediate: true,
      deep: true,
    },
  },
  created() {},
  methods: {},
}
</script>

<style scoped lang="less">
.flex(@jc,@ai,@fd:row) {
  display: flex;
  justify-content: @jc;
  align-items: @ai;
  flex-direction: @fd;
}
.livenessRoot {
  width: 100%;
  height: 100%;
  padding-right: 10px;
  .topBox {
    box-sizing: border-box;
    padding: 0.13rem 0.57rem 0 0;
    width: 100%;
    height: 0.65rem;
    .topTitle {
      font-size: 0.18rem;
      display: flex;
      align-items: center;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #ffffff;
      background: url('~@/assets/img/screen-p2.png') no-repeat;
      background-size: 125% 40%;
      background-position: left bottom;
      img {
        width: 0.53rem;
        height: 0.52rem;
      }
    }
  }
}
</style>
